<!--
 * 现金抽奖
-->
<template>
  <div class="page-index">
    <div class="page-index__header">
      <el-form :inline="true" :model="formInline" @keyup.enter.native="search()">
        <el-form-item label="活动名称">
          <el-input v-model="formInline.activityName"></el-input>
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select v-model="formInline.status">
            <el-option label="全部" value></el-option>
            <el-option label="未发布" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
          <el-button @click="kong" size="mini">清空</el-button>
          <el-button type="success" size="mini" @click="toAdd()">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="page-index__board">
      <div class="page-index__board--item">
        <div class="item-title">现金券发放数量</div>
        <div class="item-info">{{ headData.couponSendNum || 0 }}</div>
      </div>
      <div class="page-index__board--item">
        <div class="item-title">现金券领取人数</div>
        <div class="item-info">{{ headData.couponMemberNum || 0 }}</div>
      </div>
      <div class="page-index__board--item">
        <div class="item-title">现金券使用数量</div>
        <div class="item-info">{{ headData.couponUsedNum || 0 }}</div>
      </div>
      <div class="page-index__board--item">
        <div class="item-title">累计优惠金额</div>
        <div class="item-info">{{ headData.couponMoney || 0 }}</div>
      </div>
    </div>

    <div class="page-index__content" ref="tableWrapRef">
      <el-table class="table-wrapper" v-loading="loading" :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :border="true" :height="tableHeight + 'px'">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column label="活动名称" prop="activityName" width="235px" align="center" />
        <el-table-column label="现金券使用截至时间" prop="cashDeadline" align="center" />
        <el-table-column label="活动有效期" align="center">
          <template slot-scope="scope">
            {{ scope.row.activityBeginTime }}至{{ scope.row.activityEndTime }}
          </template>
        </el-table-column>
        <el-table-column label="抽奖记录" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="goraffleRecord(scope.row)">抽奖记录</el-button>
          </template>
        </el-table-column>
        <el-table-column label="关联订单" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="orderRecord(scope.row)">关联订单</el-button>
          </template>
        </el-table-column>
        <el-table-column label="活动状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">未发布</span>
            <span v-if="scope.row.status === 1">已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="text" @click="toAdd(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" v-if="scope.row.status == '1'"
              @click="updatePlanStatus(scope.row.uuid, '0')">撤回</el-button>
            <el-button size="mini" type="text" v-if="scope.row.status == '0'"
              @click="updatePlanStatus(scope.row.uuid, '1')">发布</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-index__footer">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { qryActivityConfig, editByUuid, queryCashActivityHead } from '@/api/lotteryActivityset';
import { tableSizeMixin } from '@/mixins/table-size';
export default {
  mixins: [tableSizeMixin],
  data() {
    return {
      formInline: {
        activityName: '',
        status: '',
      },
      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 10,
      },
      total: 0,
      loading: false,
      headData: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    getHeadData(data) {
      queryCashActivityHead(data).then((res) => {
        if(res.code == 1) {
          this.headData = res.result
        } else {
          this.$message.error(res.message);
        }
      })
    },
    getList() {
      const data = {
        size: 100,
        current: 1,
        condition: {
          ...this.formInline,
          activityType: 3,
        },
        ascs: [],
        descs: [],
      };
      this.loading = true;
      qryActivityConfig(data).then((res) => {
        if (res.code == 1) {
          this.tableData = res.records;
        } else {
          this.$message.error(res.message);
        }
      }).finally(() => {
        this.loading = false;
      });

      this.getHeadData(data)
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },
    toAdd(row) {
      if (row) {
        this.$router.push({ name: 'createCashCoupon', params: { row: row } });
      } else {
        this.$router.push({ name: 'createCashCoupon' });
      }
    },

    toDetail(row) {
      this.$router.push({ name: 'createCashCoupon', params: { row: row, flag: true } });
    },

    // 中奖记录
    goraffleRecord(v) {
      this.$router.push({
        name: "winningCheck",
        params: {
          activityId: v.uuid,
          activityType: 3
        }
      });
    },

    // 关联订单
    orderRecord(v) {
      this.$router.push({
        name: "normalOrderSearch",
        params: {
          activityId: v.uuid,
          activityType: 3
        }
      });
    },

    updatePlanStatus(activeId, status) {
      const msg = status == "1" ? "发布" : "撤销";
      this.$confirm("确定" + msg + "当前方案吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            activityType: 3,
            activeId: activeId,
            status: status,
          };
          editByUuid(data).then((res) => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(res.message);
            }
            this.loading = false;
          });
        })
    }
  },
};
</script>

<style scoped lang="scss">
.page-index__board {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;

  &--item {
    cursor: pointer;
    width: 200px;
    padding: 20px 0;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    .item-title {
      color: #000;
    }

    .item-info {
      margin-top: 10px;
      font-size: 1.4em;
      font-weight: bold;
    }
  }
}
</style>
